// 生成一个vue模板
<template>
  <div class="c1-box">
    <h1>Child1</h1>
    <p>选择式 API</p>
    <p>{{ infoStore.count }}</p>
    <button @click="emitEvent">emitEvent</button>
    <p>组合式 API</p>
    <p>{{ todoStore.count }}</p>
    <button @click="addTodoCount">add todo count</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import useInfoStore from "@/store/modules/info";
import useTodoStore from "@/store/modules/todo";
const infoStore = useInfoStore();
const todoStore = useTodoStore();
const emitEvent = () => {
  infoStore.add(2);
};
const addTodoCount = () => {
  todoStore.addCount();
};
</script>

<style scoped>
.c1-box {
  background-color: yellowgreen;
  /* height: 10vh; */
}
</style>
